<template>
	<!-- 商品列表组件 -->
	<view class="goods_list_container">
		<view class="goods_list_box">
			<!-- 空商品列表提示 -->
			<view class="empty_goods" v-if="emptyGoodsFlag">
				没有你想要的商品哦~ 
			</view> 
			<!-- 商品项 --> 
			<view class="goods_item" 
				v-for="(item, index) of goodsD" 
				:key="index"
				@click="gotoGoodsDetail(item)"
				>
				<!-- 商品封面 -->
				<view class="goods_item_picture">
					<img class="goods_picture" :src="baseUrl + item.cover" alt="">
				</view>
				<!-- 商品名 -->
				<view class="goods_name">
					{{ item.goods_name }}
				</view>
				<!-- 价格和销量 -->
				<view class="goods_price_sale">
					<view class="goods_price">
						￥<span class="goods_price_number">{{ item.price }}</span>
					</view>
					<view class="goods_sale">
						已售:&nbsp;{{ item.sale_volume }}
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
import { defineProps, onMounted, ref, defineExpose } from 'vue';

// 分页参数
let page = ref(1); // 由懒加载自动维护
let size = ref(8); // 默认一页显示8条商品数据

// 是否提示过“没有更多数据了”
let isTip = false;

// 商品数据列表
let goodsD = ref([]);
// 请求文件根路径
let baseUrl = uni.$baseUrl 
// 商品总数
let goodsTotal = ref(0);

// 空商品列表提示
let emptyGoodsFlag = ref(false);

// 接收调用组件时传入的过滤条件
const props = defineProps({
	showType: {
		type: String, 
		required: true
	},
	typeValue: {
		type: String, 
		required: true
	}
});

onMounted(()=>{
	// 获取商品数据
	getGoodsData();
})

// 页面触底，动态懒加载更多数据
let loadMore =  function loadMore(){
	if(isTip){
		return 0;
	}
	// 动态维护分页参数page
	if(page.value * size.value >= goodsTotal.value){
		uni.showToast({
			icon:"none",
			title:"没有更多数据了-.-"
		})
		isTip = true;
		return 1;
	}
	// 翻页，获取更多数据
	page.value += 1;
	getGoodsData()
	// console.log("子组件触底===<>");
}

// 根据调用组件时传入的过滤条件，过滤出需要展示的商品数据
async function getGoodsData(){
	// 构建请求参数对象
	let requestObj = {
		showType: props.showType, // 展示的位置
		typeValue: props.typeValue, 
		page:page.value,
		size: size.value
	}
	
	// console.log("请求参数：", requestObj);
	const res = await uni.$http.post("/goods/componentData", requestObj);
	// 获取商品数据 - 追加数据
	goodsD.value = [...goodsD.value, ...res.data.data.goodsInfos ];
	
	// 获取商品总数
	goodsTotal.value = res.data.data.count;
	
	emptyGoodsFlag.value = false;
	
	// 检查过滤后的商品数量，给特殊数量的商品数做特殊处理
	if(goodsTotal.value == 1){
		// 商品数为1，直接跳转到该商品详情页
		uni.setStorageSync("goodsDetail", JSON.stringify(goodsD.value[0]));
		uni.redirectTo({
			url:"/subPkg1/goods_detail/goods_detail"
		})
		
		emptyGoodsFlag.value = false;
		return 1;
	}
	
	// 搜索数量为0，为空显示
	if(goodsTotal.value == 0){
		emptyGoodsFlag.value = true;
	}
}

// 跳转到商品详情页面
function gotoGoodsDetail(item){
	// 将商品数据存入/切换 本地存储数据
	uni.setStorageSync("goodsDetail", JSON.stringify(item));
	uni.navigateTo({
		url:`/subPkg1/goods_detail/goods_detail`
	})
}

// 暴露子组件中函数，当父组件触底，动态实现商品数据懒加载
defineExpose({
	loadMore
})
</script>

<style lang="scss" scoped>
.goods_list_box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding-bottom: 20rpx;
}

.goods_item{
	width: 44%;
	// border: solid red 1px;
	margin-top: 10px;
	padding: 5px;
	border-radius: 10px;
	background-color: #fff;
	position: relative;
	font-size: 14px;
	display: block !important;
}

.goods_picture{
	width: 100%;
	height: 350rpx;
	// border: solid #9eff62 1px;
}

.goods_price{
	color: red;
}

.goods_price_sale{
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
	// padding-bottom: 10rpx;
	padding: 0px 10rpx 10rpx 10rpx;
}

.goods_price_number{
	font-size: 16px;
}

.goods_name {
    width: 90%;
    white-space: nowrap;         /* 不换行 */
    overflow: hidden;           /* 隐藏超出部分 */
    text-overflow: ellipsis;    /* 省略号 */
}

.empty_goods{
	font-size: 14px;
	color: #5f5f5f;
	margin-top: 20rpx;
}

.uni-view{
	display: block !important;
}
</style>
